<!--
 * @FileDescription:
 * @Author: cjw
 * @Date: 2022/2/7 16:41
 -->
<template>
  <div>
    <List  border size="large">
      <template slot="header">
        <h2 style="text-align:center; color: brown">排行榜</h2>
      </template>
      <ListItem v-for="item in plans">
        <div v-bind:title="item.content.substr(0,10)" @click="detailPlan(item.id)">{{item.content}}</div>
      </ListItem>
    </List>
    <el-dialog
      title="计划详情"
      :visible.sync="visible"
      :destroy-on-close="close_modal_destroy"
      :close-on-click-modal="close_modal"
      @close="handleCancel"
      width="700px"
    >
      <DetailPlan :id="planId" :info="info"></DetailPlan>
    </el-dialog>
  </div>
</template>

<script>
import {findListPlans, findPlan} from "@/api/plan";
import DetailPlan from "@/components/lifesquare/detailPlan";

export default {
  name: "heatList",
  components: {DetailPlan},
  data() {
    return {
      plans : [],
      size: 10,
      visible: false,
      close_modal_destroy: true,
      close_modal: false,
      planId: undefined,
      info: undefined
    }
  },
  created() {
    this.getListPlans()
  },
  methods: {
    detailPlan(id) {
      this.visible = true
      this.planId = id
      findPlan(id).then(res => {
        this.info = res.body.data
      })
    },
    getListPlans() {
      findListPlans(this.size).then(res => {
        this.plans = res.body.data
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.planId = undefined
      this.visible = false
      this.getAllPlans()
      this.info = undefined
    }
  }
}
</script>

<style scoped>

</style>
